<template>
  <view class="boss-jobs-page">
    <!-- 顶部导航栏 -->
    <view class="boss-navbar">
      <view class="boss-location" @click="chooseCity">
        <text class="location-text">{{ currentCity }}</text>
        <u-icon name="arrow-down" size="20" color="#666"></u-icon>
      </view>
      
      <view class="boss-search-box">
        <u-icon name="search" size="26" color="#999"></u-icon>
        <input 
          type="text" 
          placeholder="搜索无人机职位、公司或关键词" 
          class="search-input"
          v-model="searchKeyword"
          @confirm="handleSearch"
        >
      </view>
      
      <u-icon name="error-circle" size="28" color="#333" @click="gotoMessages"></u-icon>
    </view>
    
    <!-- 应用领域快捷筛选 -->
    <scroll-view class="drone-field-scroll" scroll-x>
      <view class="field-item" :class="{active: activeField === 'all'}" @click="setActiveField('all')">
        <text>全部领域</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'agriculture'}" @click="setActiveField('agriculture')">
        <text>农业植保</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'power'}" @click="setActiveField('power')">
        <text>电力巡检</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'aerial'}" @click="setActiveField('aerial')">
        <text>航拍测绘</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'logistics'}" @click="setActiveField('logistics')">
        <text>物流配送</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'security'}" @click="setActiveField('security')">
        <text>安防监控</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'education'}" @click="setActiveField('education')">
        <text>教育培训</text>
      </view>
      <view class="field-item" :class="{active: activeField === 'research'}" @click="setActiveField('research')">
        <text>研发制造</text>
      </view>
    </scroll-view>
    
    <!-- 筛选条件栏 -->
    <view class="boss-filters">
      <view class="filter-item" :class="{active: currentFilter === 'recommend'}" @click="setFilter('recommend')">
        <text>推荐</text>
      </view>
      <view class="filter-item" :class="{active: currentFilter === 'latest'}" @click="setFilter('latest')">
        <text>最新</text>
      </view>
      <view class="filter-item" :class="{active: currentFilter === 'salary'}" @click="setFilter('salary')">
        <text>薪资</text>
      </view>
      <view class="filter-item" @click="toggleFilterPanel">
        <text>筛选</text>
        <u-icon name="arrow-down" size="20" color="#666" class="filter-icon"></u-icon>
      </view>
    </view>
    
    <!-- 筛选面板 -->
    <view class="boss-filter-panel" v-if="showFilterPanel">
      <view class="panel-overlay" @click="toggleFilterPanel"></view>
      <view class="panel-content">
        <view class="panel-header">
          <text class="panel-title">筛选条件</text>
          <u-icon name="close" size="28" color="#333" @click="toggleFilterPanel"></u-icon>
        </view>
        
        <!-- 无人机应用领域 -->
        <view class="filter-section">
          <text class="section-title">无人机应用领域</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(item, index) in droneFieldOptions" 
              :key="index"
              @click="selectDroneField(item)"
              :class="{selected: selectedDroneField.value === item.value}"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 工作经验 -->
        <view class="filter-section">
          <text class="section-title">工作经验</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(item, index) in experienceOptions" 
              :key="index"
              @click="selectExperience(item)"
              :class="{selected: selectedExperience.value === item.value}"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 学历要求 -->
        <view class="filter-section">
          <text class="section-title">学历要求</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(item, index) in educationOptions" 
              :key="index"
              @click="selectEducation(item)"
              :class="{selected: selectedEducation.value === item.value}"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 薪资范围 -->
        <view class="filter-section">
          <text class="section-title">薪资范围</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(item, index) in salaryOptions" 
              :key="index"
              @click="selectSalary(item)"
              :class="{selected: selectedSalary.value === item.value}"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 证书要求 -->
        <view class="filter-section">
          <text class="section-title">证书要求</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(item, index) in certificateOptions" 
              :key="index"
              @click="selectCertificate(item)"
              :class="{selected: selectedCertificate.value === item.value}"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        
        <view class="panel-footer">
          <button class="reset-btn" @click="resetFilters">重置</button>
          <button class="confirm-btn" @click="confirmFilters">确认</button>
        </view>
      </view>
    </view>
    
    <!-- 职位列表 -->
    <scroll-view 
      class="jobs-list" 
      scroll-y 
      @scrolltolower="loadMoreJobs"
      refresher-enabled 
      @refresherrefresh="refreshJobs"
      refresher-threshold="80"
      @scroll="onScroll"
    >
      <!-- 职位项 -->
      <view 
        class="job-card" 
        v-for="(job, index) in filteredJobs" 
        :key="job.id"
        @click="navigateToJobDetail(job.id)"
      >
        <!-- 顶部信息 -->
        <view class="job-header">
          <view class="job-main-info">
            <text class="job-title">{{ job.title }}</text>
            <text class="job-salary">{{ job.salary }}</text>
          </view>
          
          <view class="job-tags">
            <!-- 领域标签 -->
            <view class="field-tag" :style="{backgroundColor: getFieldColor(job.field)}">
              {{ getFieldLabel(job.field) }}
            </view>
            
            <!-- 其他标签 -->
            <view 
              class="job-tag" 
              v-for="(tag, i) in job.tags" 
              :key="i"
              :class="{hot: tag === '急聘' || tag === '热门'}"
            >
              {{ tag }}
            </view>
          </view>
        </view>
        
        <!-- 中间信息 -->
        <view class="job-meta">
          <text class="meta-item">{{ job.experience }}</text>
          <text class="meta-item">{{ job.education }}</text>
          <text class="meta-item">{{ job.location }}</text>
          <text class="meta-item certificate" style="display: flex;align-items: center;" v-if="job.certificate">
			<label>{{ job.certificate }}</label>
          </text>
        </view>
        
        <!-- 公司信息 -->
        <view class="company-info">
          <image 
            class="company-logo" 
            :src="job.companyLogo" 
            mode="widthFix"
            alt="公司logo"
          ></image>
          <view class="company-details">
            <view class="company-name">{{ job.companyName }}</view>
            <view class="company-meta">{{ job.companyScale }} · {{ job.industry }}</view>
          </view>
          
          <view class="recruiter-info">
            <image 
              class="recruiter-avatar" 
              :src="job.recruiterAvatar" 
              mode="widthFix"
              alt="招聘者头像"
            ></image>
            <text class="recruiter-name">{{ job.recruiterName }}</text>
          </view>
        </view>
        
        <!-- 底部信息 -->
        <view class="job-footer">
          <text class="publish-time">{{ job.publishTime }}</text>
          <view class="job-actions">
            <view class="action-btn collect-btn" @click.stop="collectJob(job)">
              <u-icon 
                name="heart" 
                size="24" 
                :color="job.isCollected ? '#ff4d4f' : '#999'"
                :fill="job.isCollected ? '#ff4d4f' : 'none'"
              ></u-icon>
            </view>
            <view class="action-btn chat-btn" @click.stop="contactRecruiter(job)">
              <u-icon name="more-circle" size="24" color="#00b42a"></u-icon>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoading && !isRefreshing">
        <u-loading-icon size="24" color="#666"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more" v-if="!isLoading && filteredJobs.length >= totalCount && filteredJobs.length > 0">
        <text>已经到底啦</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredJobs.length === 0 && !isLoading">
        <image src="/static/images/empty-drone.png" class="empty-img" mode="widthFix" alt="没有找到职位"></image>
        <text class="empty-text">没有找到相关无人机职位</text>
        <button class="reset-btn" @click="resetAllFilters">重置筛选条件</button>
      </view>
    </scroll-view>
    
    <!-- 底部悬浮按钮 -->
    <view class="float-button" v-if="showFloatButton" @click="scrollToTop">
      <u-icon name="arrow-up" size="24" color="#fff"></u-icon>
    </view>
    
    <!-- 沟通弹窗 -->
    <u-modal 
      v-model="showChatModal" 
      title="立即沟通" 
      :show-confirm-button="false"
      :mask-close-able="true"
      :height="500"
    >
      <view class="chat-modal-content">
        <view class="chat-header">
          <image 
            class="chat-avatar" 
            :src="currentRecruiter.avatar" 
            mode="widthFix"
            alt="招聘者头像"
          ></image>
          <view class="chat-recruiter">
            <text class="chat-name">{{ currentRecruiter.name }}</text>
            <text class="chat-company">{{ currentRecruiter.company }}</text>
          </view>
        </view>
        <view class="chat-input-area">
          <textarea 
            class="chat-input" 
            placeholder="请问该职位需要哪些无人机操作证书？"
            v-model="chatMessage"
          ></textarea>
          <button class="send-btn" @click="sendMessage">发送消息</button>
        </view>
        <view class="common-questions">
          <text class="questions-title">常用问题</text>
          <view class="question-tags">
            <text class="question-tag" @click="useCommonQuestion('请问需要AOPA证书吗？')">请问需要AOPA证书吗？</text>
            <text class="question-tag" @click="useCommonQuestion('这个岗位需要出差吗？')">这个岗位需要出差吗？</text>
            <text class="question-tag" @click="useCommonQuestion('工作设备是公司提供吗？')">工作设备是公司提供吗？</text>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 城市选择
      currentCity: '全国',
      
      // 搜索关键词
      searchKeyword: '',
      
      // 无人机领域筛选
      activeField: 'all',
      droneFieldOptions: [
        { label: '全部领域', value: 'all' },
        { label: '农业植保', value: 'agriculture' },
        { label: '电力巡检', value: 'power' },
        { label: '航拍测绘', value: 'aerial' },
        { label: '物流配送', value: 'logistics' },
        { label: '安防监控', value: 'security' },
        { label: '教育培训', value: 'education' },
        { label: '研发制造', value: 'research' }
      ],
      
      // 排序筛选
      currentFilter: 'recommend',
      showFilterPanel: false,
      
      // 筛选选项
      experienceOptions: [
        { label: '不限', value: '' },
        { label: '应届毕业生', value: 'fresh' },
        { label: '1年以内', value: 'less1' },
        { label: '1-3年', value: '1-3' },
        { label: '3-5年', value: '3-5' },
        { label: '5-10年', value: '5-10' },
        { label: '10年以上', value: 'more10' }
      ],
      educationOptions: [
        { label: '不限', value: '' },
        { label: '高中及以下', value: 'highschool' },
        { label: '中专/中技', value: 'technical' },
        { label: '大专', value: 'college' },
        { label: '本科', value: 'bachelor' },
        { label: '硕士', value: 'master' }
      ],
      salaryOptions: [
        { label: '不限', value: '' },
        { label: '3k以下', value: 'less3k' },
        { label: '3k-5k', value: '3k-5k' },
        { label: '5k-8k', value: '5k-8k' },
        { label: '8k-10k', value: '8k-10k' },
        { label: '10k-15k', value: '10k-15k' },
        { label: '15k-20k', value: '15k-20k' },
        { label: '20k-30k', value: '20k-30k' },
        { label: '30k以上', value: 'more30k' }
      ],
      certificateOptions: [
        { label: '不限', value: '' },
        { label: 'AOPA证书', value: 'aopa' },
        { label: 'UTC证书', value: 'utc' },
        { label: 'ASFC证书', value: 'asfc' },
        { label: '驾驶员执照', value: 'pilot' },
        { label: '机长执照', value: 'captain' }
      ],
      
      // 选中的筛选条件
      selectedDroneField: { label: '全部领域', value: 'all' },
      selectedExperience: { label: '不限', value: '' },
      selectedEducation: { label: '不限', value: '' },
      selectedSalary: { label: '不限', value: '' },
      selectedCertificate: { label: '不限', value: '' },
      
      // 职位列表数据
      jobsList: [],
      totalCount: 0,
      page: 1,
      pageSize: 10,
      isLoading: false,
      isRefreshing: false,
      
      // 回到顶部按钮
      showFloatButton: false,
      
      // 沟通弹窗
      showChatModal: false,
      chatMessage: '',
      currentRecruiter: {}
    };
  },
  
  computed: {
    // 根据筛选条件过滤职位
    filteredJobs() {
      return this.jobsList.filter(job => {
        // 领域筛选
        if (this.activeField !== 'all' && job.field !== this.activeField) {
          return false;
        }
        
        // 搜索关键词筛选
        if (this.searchKeyword && !(
          job.title.includes(this.searchKeyword) || 
          job.companyName.includes(this.searchKeyword) ||
          this.getFieldLabel(job.field).includes(this.searchKeyword)
        )) {
          return false;
        }
        
        // 经验筛选
        if (this.selectedExperience.value && !this.matchExperience(job.experience, this.selectedExperience.value)) {
          return false;
        }
        
        // 学历筛选
        if (this.selectedEducation.value && !this.matchEducation(job.education, this.selectedEducation.value)) {
          return false;
        }
        
        // 薪资筛选
        if (this.selectedSalary.value && !this.matchSalary(job.salary, this.selectedSalary.value)) {
          return false;
        }
        
        // 证书筛选
        if (this.selectedCertificate.value && !this.matchCertificate(job.certificate, this.selectedCertificate.value)) {
          return false;
        }
        
        return true;
      });
    }
  },
  
  onLoad() {
    // 初始加载职位数据
    this.loadJobs();
  },
  
  methods: {
    // 加载职位数据
    loadJobs(refresh = false) {
      if (this.isLoading) return;
      
      this.isLoading = true;
      if (refresh) {
        this.page = 1;
        this.isRefreshing = true;
      }
      
      // 模拟API请求
      setTimeout(() => {
        const mockJobs = [];
        const fields = ['agriculture', 'power', 'aerial', 'logistics', 'security', 'education', 'research'];
        const titles = {
          agriculture: ['农业植保飞手', '无人机植保技术员', '农药喷洒操作手', '农业无人机飞防工程师'],
          power: ['电力巡检飞手', '输电线路巡检工程师', '电网巡检操作员', '电力无人机运维师'],
          aerial: ['航拍飞手', '测绘无人机操作员', '影视航拍师', '三维建模飞手'],
          logistics: ['物流配送飞手', '无人机配送工程师', '末端配送操作员'],
          security: ['安防监控飞手', '巡检安防工程师', '边境巡逻无人机操作员'],
          education: ['无人机培训讲师', '飞行教练', '教学飞手', '实训指导老师'],
          research: ['无人机研发工程师', '飞控算法工程师', '无人机测试工程师', '硬件研发师']
        };
        const tags = ['急聘', '五险一金', '周末双休', '带薪年假', '绩效奖金', '包住宿', '交通补助', '专业培训'];
        const certificates = ['AOPA证书', 'UTC证书', '驾驶员执照', '机长执照', ''];
        
        for (let i = 0; i < this.pageSize; i++) {
          const id = (this.page - 1) * this.pageSize + i + 1;
          const field = fields[Math.floor(Math.random() * fields.length)];
          const titleIndex = Math.floor(Math.random() * titles[field].length);
          
          // 随机生成薪资
          const salaryRanges = ['6k-8k', '8k-10k', '10k-15k', '15k-20k', '20k-25k', '25k-35k', '35k-50k'];
          const salary = salaryRanges[Math.floor(Math.random() * salaryRanges.length)];
          
          // 随机生成标签
          const jobTags = [];
          const tagCount = Math.floor(Math.random() * 3) + 1;
          for (let j = 0; j < tagCount; j++) {
            const randomTag = tags[Math.floor(Math.random() * tags.length)];
            if (!jobTags.includes(randomTag)) {
              jobTags.push(randomTag);
            }
          }
          
          mockJobs.push({
            id: id,
            field: field,
            title: titles[field][titleIndex],
            salary: salary,
            experience: ['不限', '1年以内', '1-3年', '3-5年'][Math.floor(Math.random() * 4)],
            education: ['不限', '大专', '本科'][Math.floor(Math.random() * 3)],
            location: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安'][Math.floor(Math.random() * 8)] + ' ' + 
                      ['朝阳区', '海淀区', '浦东新区', '天河区', '南山区', '西湖区'][Math.floor(Math.random() * 6)],
            tags: jobTags,
            certificate: certificates[Math.floor(Math.random() * certificates.length)],
            companyName: ['大疆创新', '极飞科技', '亿航智能', '北方天途', '中直股份', '航天科技', '顺丰航空', '京东物流'][Math.floor(Math.random() * 8)],
            companyLogo: `https://picsum.photos/id/${30 + id}/60/60`,
            companyScale: ['100-200人', '200-500人', '500-1000人', '1000人以上'][Math.floor(Math.random() * 4)],
            industry: ['航空航天', '智能装备', '农业科技', '物流运输', '教育培训', '影视传媒'][Math.floor(Math.random() * 6)],
            recruiterName: ['张经理', '李总监', '王主管', '赵HR', '陈总', '刘工'][Math.floor(Math.random() * 6)],
            recruiterAvatar: `https://picsum.photos/id/${60 + id}/40/40`,
            publishTime: [`${Math.floor(Math.random() * 24)}小时前`, `${Math.floor(Math.random() * 3)}天前`][Math.floor(Math.random() * 2)],
            isCollected: false
          });
        }
        
        // 更新数据
        if (refresh) {
          this.jobsList = mockJobs;
          this.isRefreshing = false;
        } else {
          this.jobsList = [...this.jobsList, ...mockJobs];
        }
        
        this.totalCount = 50; // 模拟总条数
        this.page++;
        this.isLoading = false;
      }, 1000);
    },
    
    // 下拉刷新
    refreshJobs() {
      this.loadJobs(true);
    },
    
    // 加载更多
    loadMoreJobs() {
      if (this.jobsList.length >= this.totalCount || this.isLoading) return;
      this.loadJobs();
    },
    
    // 设置活跃领域
    setActiveField(field) {
      this.activeField = field;
      // 更新筛选面板中的领域选择
      this.selectedDroneField = this.droneFieldOptions.find(item => item.value === field) || { label: '全部领域', value: 'all' };
    },
    
    // 设置排序方式
    setFilter(filterType) {
      this.currentFilter = filterType;
      // 根据排序方式重新排序
      if (filterType === 'salary') {
        this.jobsList.sort((a, b) => this.compareSalary(b.salary, a.salary));
      } else if (filterType === 'latest') {
        this.jobsList.sort((a, b) => this.compareTime(a.publishTime, b.publishTime));
      }
    },
    
    // 切换筛选面板
    toggleFilterPanel() {
      this.showFilterPanel = !this.showFilterPanel;
    },
    
    // 选择无人机领域
    selectDroneField(item) {
      this.selectedDroneField = item;
      this.activeField = item.value;
    },
    
    // 选择工作经验
    selectExperience(item) {
      this.selectedExperience = item;
    },
    
    // 选择学历要求
    selectEducation(item) {
      this.selectedEducation = item;
    },
    
    // 选择薪资范围
    selectSalary(item) {
      this.selectedSalary = item;
    },
    
    // 选择证书要求
    selectCertificate(item) {
      this.selectedCertificate = item;
    },
    
    // 重置筛选条件
    resetFilters() {
      this.selectedDroneField = { label: '全部领域', value: 'all' };
      this.selectedExperience = { label: '不限', value: '' };
      this.selectedEducation = { label: '不限', value: '' };
      this.selectedSalary = { label: '不限', value: '' };
      this.selectedCertificate = { label: '不限', value: '' };
      this.activeField = 'all';
    },
    
    // 重置所有筛选
    resetAllFilters() {
      this.resetFilters();
      this.searchKeyword = '';
      this.currentFilter = 'recommend';
      this.loadJobs(true);
    },
    
    // 确认筛选条件
    confirmFilters() {
      this.showFilterPanel = false;
      // 模拟筛选后重新加载数据
      this.loadJobs(true);
    },
    
    // 处理搜索
    handleSearch() {
      this.loadJobs(true);
    },
    
    // 跳转到职位详情
    navigateToJobDetail(jobId) {
      uni.navigateTo({
        url: `/pages/recruitment/detail?id=${jobId}`
      });
    },
    
    // 收藏职位
    collectJob(job) {
      job.isCollected = !job.isCollected;
      uni.showToast({
        title: job.isCollected ? '收藏成功' : '取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 联系招聘者
    contactRecruiter(job) {
      this.currentRecruiter = {
        avatar: job.recruiterAvatar,
        name: job.recruiterName,
        company: job.companyName
      };
      this.chatMessage = '';
      this.showChatModal = true;
    },
    
    // 使用常用问题
    useCommonQuestion(text) {
      this.chatMessage = text;
    },
    
    // 发送消息
    sendMessage() {
      if (!this.chatMessage.trim()) return;
      
      uni.showToast({
        title: '消息已发送',
        icon: 'none',
        duration: 1500
      });
      
      this.showChatModal = false;
    },
    
    // 滚动监听
    onScroll(e) {
      this.showFloatButton = e.detail.scrollTop > 800;
    },
    
    // 回到顶部
    scrollToTop() {
      const scrollView = uni.createSelectorQuery().select('.jobs-list');
      scrollView.scrollOffset(function(res) {
        scrollView.scrollTo({
          scrollTop: 0,
          duration: 300
        });
      }).exec();
    },
    
    // 获取领域标签
    getFieldLabel(fieldValue) {
      const field = this.droneFieldOptions.find(item => item.value === fieldValue);
      return field ? field.label : '';
    },
    
    // 获取领域标签颜色
    getFieldColor(fieldValue) {
      const colorMap = {
        agriculture: '#00b42a',    // 农业-绿色
        power: '#ff7d00',          // 电力-橙色
        aerial: '#4facfe',         // 航拍-蓝色
        logistics: '#722ed1',      // 物流-紫色
        security: '#f53f3f',       // 安防-红色
        education: '#ff5722',      // 教育-深橙
        research: '#86909c'        // 研发-灰色
      };
      return colorMap[fieldValue] || '#86909c';
    },
    
    // 经验匹配
    matchExperience(jobExp, filterExp) {
      const expMap = {
        'fresh': ['应届毕业生'],
        'less1': ['1年以内', '应届毕业生'],
        '1-3': ['1-3年', '1年以内', '应届毕业生'],
        '3-5': ['3-5年', '1-3年'],
        '5-10': ['5-10年', '3-5年'],
        'more10': ['10年以上', '5-10年']
      };
      return expMap[filterExp]?.includes(jobExp) || false;
    },
    
    // 学历匹配
    matchEducation(jobEdu, filterEdu) {
      const eduMap = {
        'highschool': ['高中及以下'],
        'technical': ['中专/中技', '高中及以下'],
        'college': ['大专', '中专/中技', '高中及以下'],
        'bachelor': ['本科', '大专', '中专/中技'],
        'master': ['硕士', '本科', '大专']
      };
      return eduMap[filterEdu]?.includes(jobEdu) || false;
    },
    
    // 薪资匹配
    matchSalary(jobSalary, filterSalary) {
      const salaryMap = {
        'less3k': [3000],
        '3k-5k': [3000, 5000],
        '5k-8k': [5000, 8000],
        '8k-10k': [8000, 10000],
        '10k-15k': [10000, 15000],
        '15k-20k': [15000, 20000],
        '20k-30k': [20000, 30000],
        'more30k': [30000]
      };
      
      // 解析职位薪资范围
      const jobRange = jobSalary.match(/\d+/g).map(Number);
      const jobMin = jobRange[0] * 1000;
      const jobMax = jobRange[1] * 1000;
      
      // 解析筛选薪资范围
      const filterRange = salaryMap[filterSalary];
      if (!filterRange) return true;
      
      if (filterRange.length === 1) {
        // 小于或大于某个值
        return filterRange[0] === 3000 ? jobMax <= 3000 : jobMin >= 30000;
      } else {
        // 范围内
        return jobMin >= filterRange[0] && jobMax <= filterRange[1];
      }
    },
    
    // 证书匹配
    matchCertificate(jobCert, filterCert) {
      if (!filterCert) return true;
      if (!jobCert) return false;
      
      const certMap = {
        'aopa': 'AOPA',
        'utc': 'UTC',
        'asfc': 'ASFC',
        'pilot': '驾驶员',
        'captain': '机长'
      };
      
      return jobCert.includes(certMap[filterCert] || '');
    },
    
    // 比较薪资
    compareSalary(salaryA, salaryB) {
      const getMinSalary = (salary) => {
        const num = salary.match(/\d+/)[0];
        return parseInt(num) * 1000;
      };
      
      return getMinSalary(salaryA) - getMinSalary(salaryB);
    },
    
    // 比较发布时间
    compareTime(timeA, timeB) {
      const getHours = (time) => {
        if (time.includes('小时')) {
          return parseInt(time);
        } else {
          return parseInt(time) * 24;
        }
      };
      
      return getHours(timeB) - getHours(timeA);
    },
    
    // 选择城市
    chooseCity() {
      // 实际项目中跳转到城市选择页
      uni.showToast({
        title: '城市选择功能',
        icon: 'none'
      });
    },
    
    // 查看消息
    gotoMessages() {
      uni.navigateTo({
        url: '/pages/messages/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.boss-jobs-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

// 导航栏
.boss-navbar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .boss-location {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    padding-right: 10rpx;
    
    .location-text {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .boss-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 40rpx;
    padding: 12rpx 20rpx;
    
    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      padding-left: 10rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
  }
}

// 无人机领域筛选栏
.drone-field-scroll {
  background-color: #fff;
  padding: 15rpx 0;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
  
  .field-item {
    display: inline-block;
    padding: 8rpx 24rpx;
    margin: 0 10rpx;
    font-size: 26rpx;
    color: #333;
    border-radius: 40rpx;
    background-color: #f5f5f5;
    transition: all 0.2s;
    
    &.active {
      background-color: #00b42a;
      color: #fff;
    }
  }
}

// 筛选栏
.boss-filters {
  display: flex;
  background-color: #fff;
  height: 80rpx;
  border-bottom: 1px solid #eee;
  
  .filter-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    .filter-icon {
      margin-left: 5rpx;
    }
    
    &.active {
      color: #00b42a;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        width: 60%;
        height: 4rpx;
        background-color: #00b42a;
        border-radius: 2rpx;
      }
    }
  }
}

// 筛选面板
.boss-filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
  
  .panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 30rpx;
    border-bottom: 1px solid #eee;
    
    .panel-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .filter-section {
    padding: 25rpx 30rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .section-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
      font-weight: 500;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      
      .filter-option {
        width: 25%;
        padding: 15rpx 0;
        font-size: 26rpx;
        color: #666;
        text-align: center;
        box-sizing: border-box;
        
        &.selected {
          color: #00b42a;
          font-weight: 500;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 5rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 6rpx;
            background-color: #00b42a;
            border-radius: 3rpx;
          }
        }
      }
    }
  }
  
  .panel-footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1px solid #eee;
    
    .reset-btn, .confirm-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .reset-btn {
      background-color: #f5f5f5;
      color: #666;
      border: none;
      margin-right: 20rpx;
    }
    
    .confirm-btn {
      background-color: #00b42a;
      color: #fff;
      border: none;
    }
  }
}

// 职位列表
.jobs-list {
  min-height: calc(100vh - 300rpx);
  padding-bottom: 40rpx;
  
  .job-card {
    background-color: #fff;
    padding: 25rpx 30rpx;
    margin: 15rpx 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.1s;
    
    &:active {
      transform: scale(0.995);
    }
    
    // 职位头部信息
    .job-header {
      margin-bottom: 15rpx;
      
      .job-main-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .job-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          max-width: 60%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .job-salary {
          font-size: 32rpx;
          font-weight: 600;
          color: #f53f3f;
        }
      }
      
      .job-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .field-tag {
          font-size: 22rpx;
          color: #fff;
          padding: 3rpx 12rpx;
          border-radius: 4rpx;
        }
        
        .job-tag {
          font-size: 22rpx;
          color: #666;
          background-color: #f5f5f5;
          padding: 3rpx 12rpx;
          border-radius: 4rpx;
          
          &.hot {
            color: #f53f3f;
            background-color: #fff1f0;
          }
        }
      }
    }
    
    // 职位元信息
    .job-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .meta-item {
        font-size: 26rpx;
        color: #86909c;
      }
      
      .certificate {
        display: flex;
        align-items: center;
        gap: 5rpx;
      }
    }
    
    // 公司信息
    .company-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15rpx;
      
      .company-logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 8rpx;
        margin-right: 15rpx;
      }
      
      .company-details {
        flex: 1;
        min-width: 0;
        
        .company-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 5rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .company-meta {
          font-size: 24rpx;
          color: #86909c;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      
      .recruiter-info {
        display: flex;
        align-items: center;
        
        .recruiter-avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        
        .recruiter-name {
          font-size: 24rpx;
          color: #86909c;
        }
      }
    }
    
    // 职位底部
    .job-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10rpx;
      border-top: 1px dashed #f5f5f5;
      
      .publish-time {
        font-size: 24rpx;
        color: #86909c;
      }
      
      .job-actions {
        display: flex;
        gap: 20rpx;
        
        .action-btn {
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  
  // 加载状态
  .loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    
    .loading-text {
      font-size: 26rpx;
      color: #86909c;
      margin-left: 10rpx;
    }
  }
  
  // 没有更多
  .no-more {
    text-align: center;
    padding: 40rpx 0;
    font-size: 26rpx;
    color: #86909c;
  }
  
  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150rpx 0 100rpx;
    
    .empty-img {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #86909c;
      margin-bottom: 40rpx;
    }
    
    .reset-btn {
      background-color: #fff;
      color: #00b42a;
      border: 1px solid #00b42a;
      width: 240rpx;
      height: 70rpx;
      border-radius: 35rpx;
      font-size: 28rpx;
    }
  }
}

// 回到顶部按钮
.float-button {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  z-index: 99;
}

// 沟通弹窗
.chat-modal-content {
  padding: 10rpx 0;
  
  .chat-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    
    .chat-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 15rpx;
    }
    
    .chat-recruiter {
      .chat-name {
        font-size: 28rpx;
        color: #333;
        display: block;
        margin-bottom: 5rpx;
      }
      
      .chat-company {
        font-size: 24rpx;
        color: #86909c;
      }
    }
  }
  
  .chat-input-area {
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    
    .chat-input {
      width: 100%;
      height: 140rpx;
      border: 1px solid #eee;
      border-radius: 10rpx;
      padding: 15rpx;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .send-btn {
      background-color: #00b42a;
      color: #fff;
      border: none;
      width: 100%;
      height: 70rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
    }
  }
  
  .common-questions {
    padding: 20rpx 30rpx;
    
    .questions-title {
      font-size: 26rpx;
      color: #86909c;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .question-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
      
      .question-tag {
        font-size: 24rpx;
        color: #666;
        background-color: #f5f5f5;
        padding: 10rpx 20rpx;
        border-radius: 40rpx;
      }
    }
  }
}

</style>